<template>
	
	<div>
		<div style="text-align: left;margin: 1vh; color: black;">
			<div>
				<div>
					<h3>
						<strong>
							{{data.title}}
						</strong>
					</h3>
					<div>{{data.context}}</div>
<!-- 					<div style="right: 0;bottom: 0;">x
						<strong>
							{{num}}
						</strong>
	
					</div> -->
				</div>
			</div>
			<div>
				<span>
					<strong>
						订单编号：
					</strong>{{data.id}}
				</span>
				<br />
				<span>
					<strong>
						下单时间：
					</strong>{{data.startTime}}
				</span>
			</div>
			<div style="text-align: right; font-size: 2vh;">
				<span>价格：<strong style="color: red;font-size: 1.5rem;">&yen;{{price}}</strong></span> <br />
				<span>状态：
					<strong>
						{{statuName[data.status]}}
					</strong>
<!-- 					<div style="margin-top: 0.5rem;" v-if="data.status===1">
						<van-button round type="danger" @click="pay">立即支付</van-button>
					</div> -->
					<div style="margin-top: 0.5rem;" v-if="data.status===3">
						<van-button round type="success" @click="confirmOrder">订单完成确认</van-button>
					</div>
				</span>
			</div>
		</div>
	</div>
	
	
<!-- 	<div>
		<van-card :price="price" :desc="data.context" :title="data.title">
			<template #footer>
				{{statu}}
				
				<div v-if="data.status===1">
					<van-button size="mini" @click="createOrder(data.id)">创建订单</van-button>
				</div>
			</template>
		</van-card>

	</div> -->
</template>

<script>
	import {
		showNotify,
		showConfirmDialog
	} from 'vant';
	import url from '@/assets/url.json';
	
	export default {
		props: {
			data: Object,
			openPrePayPage:Function
		},

		data() {
			return {
				price: '',
				statu: '',
				statuName: [
					"默认",
					"未支付",
					"已支付",
					"已接单",
					"已结束",
				],
			}
		},
		mounted() {
			// 价格加上小数点
			let str = this.data.price;
			let numberPrice=Number.parseInt(str);
			if(numberPrice<10){
				str='00'+str;
			}else{
				if(numberPrice<100){
					str='0'+str;
				}
			}
			let arr = str.split('');
			arr.splice(-2,0,'.');
			str = arr.join('');
			this.price=str;
		},
		methods:{
			confirmOrder() {
				showConfirmDialog({
						title: '你的求助是否已完成?',
						message: '订单名称:' + this.data.title,
					})
					.then(() => {
						this.$axios({
							url: url.ip + '/api-offer' + '/order/confirm/' + this.data.id,
							method: 'GET',
							headers: {
								token: this.$cookies.get('token'),
							}
						}).then((res) => {
							if (res.data.code !== 0) {
								console.log(res);
								showNotify({
									type: 'danger',
									message: res.data.message
								});
							} else {
								showNotify({
									type: 'success',
									message: "已确认订单完成"
								});
							}
						}).catch((err) => {
							console.log(err);
						})
					})
					.catch(() => {
						showNotify({
							type: 'warning',
							message: "已取消确认"
						});
					});
			
			},
			
			createOrder(oid){
				this.$axios({
					url: url.ip + '/api-offer' + '/order/create',
					method: 'GET',
					params:{
						pid:oid
					},
					headers: {
						token: this.$cookies.get('token'),
					}
				}).then((res) => {
					if (res.data.code !== 0) {
						console.log(res);
						showNotify({
							type: 'danger',
							message: res.data.message
						});
					} else {
						showNotify({
							type: 'success',
							message: '创建求助成功'
						});
						this.openPrePayPage(res.data.data);
						// this.prepayPageData=res.data.data;
						// this.prepayPageShow=true;
					}
				}).catch((err) => {
					console.log(err);
					showNotify({
						type: 'danger',
						message: "网络错误或用户未登录"
					});
				})
			}
		}
	}
</script>

<style>
</style>